import { Layout, Menu } from 'antd'
import {
  SearchOutlined,
  HomeOutlined,
  BookOutlined,
  UserOutlined,
} from '@ant-design/icons'
import { useEffect, useState } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router'

const { Header, Content, Footer } = Layout

const menuItems = [
  {
    label: '首页',
    key: '/dashboard/home',
    icon: <HomeOutlined />,
  },
  {
    label: '文章',
    key: '/dashboard/article',
    icon: <BookOutlined />
  },
  {
    label: '关于我',
    key: '/dashboard/about',
    icon: <UserOutlined />
  }
]

function Dashboard() {
  // selectKey 菜单选中状态
  const [selectKey, setSelectKey] = useState([])
  // 获取当前路由信息
  const location = useLocation()
  const navigate = useNavigate()

  // 切换路由 获取当前pathname 设置menu的key
  useEffect(() => {
    setSelectKey([location.pathname])
  }, [location])

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header
        style={{
          position: 'fixed',
          zIndex: 1,
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          padding: '0px',
        }}
      >
        <Menu
          theme="light"
          mode="horizontal"
          selectedKeys={selectKey}
          style={{ lineHeight: '64px', flex: 1 }}
          items={menuItems}
          onSelect={({ key }) => {
            navigate(key)
          }}
        />
      </Header>

      <Content
        style={{
          padding: '0 50px',
          marginTop: 64,
          background: '#fff',
        }}
      >
        <Outlet />
      </Content>

      <Footer style={{ textAlign: 'center' }}>简洁博客 ©2023</Footer>
    </Layout>
  )
}

export default Dashboard
